<template>
	<el-row :gutter="500">
		<el-col :span="12">
			<div class="left w-790px h-504px bg-bottom" />
		</el-col>
		<el-col :span="12">
			<div class="w-410px h-504px">
				<el-card class="login" shadow="never">
					<div class="login-top">
						<h3 class="title">要直聘，来对了</h3>
					</div>
					<div class="h-300px">
						<el-form
							ref="ruleFormRef"
							:rules="rules"
							label-position="top"
							:model="state.loginFrom"
							label-width="120px"
						>
							<el-form-item label="账号" prop="username">
								<el-input v-model="state.loginFrom.username" />
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input show-password v-model="state.loginFrom.password" />
							</el-form-item>
							<el-form-item label="确认密码" prop="password2">
								<el-input show-password v-model="state.loginFrom.password2" />
							</el-form-item>

							<el-form-item>
								<el-button
									@click="submitForm(ruleFormRef)"
									type="primary"
									class="sure-btn"
									>注册
								</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div>
						<el-link href="/login" target="_blank">你有账号？登录</el-link>
					</div>
				</el-card>
			</div>
		</el-col>
	</el-row>

	<el-dialog
		v-model="state.dialogVisible"
		title="首次注册需要补全信息"
		width="50%"
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		draggable
	>
		<el-form
			ref="ruleFormRef"
			:rules="rules"
			:model="state.loginFrom"
			label-width="auto"
			style="max-width: 600px"
		>
			<el-form-item label="昵称" prop="nickName">
				<el-input v-model="state.loginFrom.nickName" />
			</el-form-item>
			<el-form-item label="头像" prop="profile">
				<div>
					<el-upload
						class="avatar-uploader"
						:action="state.imgPath"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
					>
						<img
							v-if="state.loginFrom.profile"
							:src="state.loginFrom.profile"
							class="avatar"
						/>
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
				</div>
			</el-form-item>
			<el-form-item label="工资" prop="salary">
				<el-input v-model="state.loginFrom.salary" />
			</el-form-item>
			<el-form-item label="毕业学校" prop="university">
				<el-input v-model="state.loginFrom.university" />
			</el-form-item>
			<el-form-item label="意愿岗位" prop="post">
				<el-input v-model="state.loginFrom.post" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="userTag(ruleFormRef)">提交</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { UploadProps } from 'element-plus'
const router = useRouter()

const ruleFormRef = ref<FormInstance>()
import type { FormInstance, FormRules } from 'element-plus'
const state = reactive({
	imgPath: '',
	dialogVisible: false,
	loginFrom: {
		username: '',
		password: '',
		password2: '',
		salary: 0,
		university: '',
		post: '',
		profile: '',
		nickName: '',
	},
})
const rules = reactive<FormRules>({
	username: [
		{
			required: true,
			message: '账号不能为空',
			trigger: 'change',
		},
	],
	password: [
		{
			required: true,
			message: '密码不能为空',
			trigger: 'change',
		},
	],
	password2: [
		{
			required: true,
			message: '二次密码不能为空',
			trigger: 'change',
		},
	],
	nickName: [
		{
			required: true,
			message: '用户昵称不能为空',
			trigger: 'change',
		},
	],
	salary: [
		{
			required: true,
			message: '工资不能为空',
			trigger: 'change',
		},
	],
	university: [
		{
			required: true,
			message: '毕业学校不能为空',
			trigger: 'change',
		},
	],
	profile: [
		{
			required: true,
			message: '头像不能为空',
			trigger: 'change',
		},
	],
	post: [
		{
			required: true,
			message: '岗位不能为空',
			trigger: 'change',
		},
	],
})

function init() {
	state.imgPath = import.meta.env.VITE_API_BASE_URL + '/file/upload'
}

init()
/**
 * 文件上传
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile,
) => {
	state.loginFrom.profile = response.data.url
}

/**
 * 注册提交
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (state.loginFrom.password !== state.loginFrom.password2) {
				toast.error('两次密码不一致')
				return
			}
			http.post('/user/isRegister', state.loginFrom).then((res) => {
				if (res.data) {
					toast.success('注册成功，请填写基本信息')
					state.dialogVisible = true
				}
			})
		}
	})
}

/**
 * 用户信息提交
 * @param formEl
 */
const userTag = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			http.post('/user/register', state.loginFrom).then(() => {
				toast.success('注册成功')
				router.push('/login')
			})
		}
	})
}
</script>

<style scoped>
::v-deep .avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}
::v-deep .avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}
::v-deep .el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
}

.left {
	background-image: url('/img/97f904e9.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.login {
	padding-top: 30px;
	width: 410px;
	height: 459px;
}

.login-top {
	height: 80px;
	width: 100%;
}

.title {
	color: #00a6a7;
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
	text-align: center;
}

.sure-btn {
	background: linear-gradient(90deg, #00bebd, #01a7a7);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	line-height: 48px;
	padding: 0;
	transition: all 0.2s linear;
	width: 100%;
}
</style>
